<template>
  <div class="workorder-followup-container">
    <el-card>
      <h2>工单回访</h2>

      <!-- 待回访工单列表 -->
      <el-table
        :data="followupOrderList"
        border
        stripe
        v-loading="isLoading"
        element-loading-text="加载中..."
      >
        <el-table-column prop="_id" label="工单编号" width="180" />
        <el-table-column prop="customer_name" label="客户姓名" width="120" />
        <el-table-column prop="customer_phone" label="联系电话" width="150" />
        <el-table-column prop="user_claim" label="问题描述" min-width="200" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleFollowup(scope.row)"
              :disabled="scope.row.status !== '待客服回访'"
            >
              进行回访
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 回访反馈模态框 -->
      <el-dialog
        v-model="showFollowupDialog"
        title="填写回访反馈"
        width="40%"
        :before-close="handleDialogClose"
      >
        <el-form :model="followupForm" label-width="80px">
          <el-form-item label="回访反馈">
            <el-input
              v-model="followupForm.feedback"
              type="textarea"
              :rows="5"
              placeholder="请填写客户反馈（如服务满意度、问题解决情况等）"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showFollowupDialog = false">取消</el-button>
            <el-button type="primary" @click="confirmFollowup" :loading="isSubmitting">
              提交反馈
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getWorkOrdersByStatus } from '@/api/workOrder' // 按状态获取工单接口
import { finalConfirmByStaff } from '@/api/workOrder' // 客服最终完成接口
import { ElMessage } from 'element-plus'

// 状态管理
const followupOrderList = ref([]) // 待回访工单列表
const isLoading = ref(false) // 工单加载状态
const showFollowupDialog = ref(false) // 回访模态框显示状态
const followupForm = ref({ feedback: '' }) // 回访反馈表单
const currentOrderId = ref('') // 当前操作的工单ID
const isSubmitting = ref(false) // 提交加载状态

// 初始化：加载待回访工单（状态为'pending_followup'）
onMounted(async () => {
  isLoading.value = true
  try {
    const res = await getWorkOrdersByStatus({ status: '待客服回访' })
    if (res.code === 200) {
      followupOrderList.value = res.data
    }
  } catch (err) {
    ElMessage.error('获取待回访工单失败', err)
  } finally {
    isLoading.value = false
  }
})

// 点击进行回访按钮
const handleFollowup = (row) => {
  currentOrderId.value = row._id // 假设工单数据包含_id字段
  followupForm.value.feedback = '' // 重置反馈内容
  showFollowupDialog.value = true
}

// 确认提交回访反馈
const confirmFollowup = async () => {
  if (!currentOrderId.value) return

  isSubmitting.value = true
  try {
    const res = await finalConfirmByStaff(currentOrderId.value, {
      feedback: followupForm.value.feedback,
    })
    if (res.code === 200) {
      ElMessage.success('回访反馈提交成功')
      showFollowupDialog.value = false
      // 刷新工单列表
      const freshRes = await getWorkOrdersByStatus({ status: '待客服回访' })
      followupOrderList.value = freshRes.data
    } else {
      ElMessage.error(res.message || '提交失败')
    }
  } catch (err) {
    ElMessage.error('网络请求失败', err)
  } finally {
    isSubmitting.value = false
  }
}

// 关闭模态框
const handleDialogClose = () => {
  showFollowupDialog.value = false
  currentOrderId.value = ''
}
</script>

<style scoped>
.workorder-followup-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
